<template>
  <basic-container>
    <div class="allocation-content">
      <div class="allocation-header">
        <ArrowLeftBold
          @click="handleBack"
          width="24"
          height="24"
          style="padding-top: 4px; cursor: pointer"
          title="返回"
        />
        入组结果
      </div>
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        ref="crud"
        v-model="form"
        :before-open="beforeOpen"
        v-model:page="page"
        @search-change="searchChange"
        @selection-change="selectionChange"
        @search-reset="searchReset"
        @current-change="currentChange"
        @row-update="rowUpdate"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        v-model:search="search"
        @on-load="onLoad"
      >
        <template #name="{ row, index }">
          <span
            style="color: #3c8dbc; cursor: pointer"
            @click="handleAllocationMenu(0, row, index)"
            >{{ row.name }}</span
          >
        </template>
        <template #createUser="{ row, index }">
          <span
            style="color: #3c8dbc; cursor: pointer"
            @click="handleAllocationMenu(1, row, index)"
            >{{ row.createUser }}</span
          >
        </template>
      </avue-crud>
      <el-dialog v-model="isAllocation" :title="alloctionDialogTitle" :width="phaseAddDialogWidth">
        <!-- @submit="allocationDialogSubmit" -->
        <avue-form :option="allocationDialogOption" v-model="allocationDialogForm"></avue-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="isAllocation = false">关 闭</el-button>
            <!-- <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button> -->
          </div>
        </template>
      </el-dialog>
    </div>
  </basic-container>
</template>
<script setup>
import {
  getList,
  getDetail,
  update,
} from '@/api/clinicalcase/clinicalCase';
import { ref, reactive, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { add } from '@/api/system/menu';
const router = useRouter();
const route = useRoute();
const routerQuery = ref({});
routerQuery.value = route.query;
const crud = ref(null);
const store = useStore();
const option = ref({
  height: 'auto',
  calcHeight: 40,
  tip: false,
  searchShow: true,
  border: true,
  index: false,
  selection: false,
  dialogClickModal: false,
  indexWidth: 80,
  indexLabel: '编号',
  align: 'center',
  searchMenuSpan: 18,
  searchMenuPosition: 'right',
  dialogWidth: '60%',
  dialogCustomClass: 'crf-dialog',
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  addBtn: false,
  menu: false,
  column: [
    {
      label: '主键',
      prop: 'id',
      type: 'input',
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
    },
    {
      label: '租户ID',
      prop: 'tenantId',
      type: 'input',
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
    },
    {
      label: '创建部门',
      prop: 'createDept',
      type: 'input',
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
    },
    {
      label: '修改人',
      prop: 'updateUser',
      type: 'input',
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
    },
    {
      label: '修改时间',
      prop: 'updateTime',
      type: 'input',
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
    },
    {
      label: '状态',
      prop: 'status',
      type: 'input',
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
    },
    {
      label: '是否已删除',
      prop: 'isDeleted',
      type: 'input',
      addDisplay: false,
      editDisplay: false,
      viewDisplay: false,
      hide: true,
    },
    {
      label: '病例标识',
      prop: 'identification',
      type: 'input',
      search: true,
      slot: true,
      overHidden: true,
      disabled: true,
    },
    {
      label: '姓 名',
      prop: 'name',
      type: 'input',
      // dicUrl: `/blade-system/user/user-list`,
      // props: {
      //   label: 'realName',
      //   value: 'id',
      // },
      filterable: true,
      overHidden: true,
      disabled: true,
    },
    {
      label: '分 组',
      prop: 'groupName',
      type: 'input',
      filterable: true,
      overHidden: true,
      search: true,
    },
    {
      label: '层级',
      prop: 'CJ',
      type: 'input',
      overHidden: true,
      hide: true,
      disabled: true,
    },
    {
      label: '药械编号',
      prop: 'caseNo',
      type: 'input',
      overHidden: true,
      search: true,
      disabled: true,
    },
    {
      label: '所属主要研究者（录入员）',
      prop: 'LRY',
      type: 'select',
      dicUrl: `/blade-system/user/user-list`,
      props: {
        label: 'realName',
        value: 'id',
      },
      width: 200,
      slot: true,
      filterable: true,
      overHidden: true,
      editDisplay: false,
    },
    {
      label: '所属中心',
      prop: "hospitalDeptName",
      type: "input",
      filterable: true,
      overHidden: true,
      search: true,
      disabled: true,
    },
    {
      label: '状态',
      prop: 'ZT',
      type: 'select',
      dicData: [
        {
          label: '正常',
          value: 1,
        },
        {
          label: '锁定',
          value: 2,
        },
        {
          label: '脱落',
          value: 3,
        },
        {
          label: '删除',
          value: 4,
        },
        {
          label: '结束',
          value: 5,
        },
      ],
      search: true,
      disabled: true,
    },
    // {
    //   label: '创建时间',
    //   prop: 'createTime',
    //   type: 'input',
    //   overHidden: true,
    //   addDisplay: false,
    //   editDisplay: false,
    //   viewDisplay: false,
    // },
  ],
});
const form = ref({});
const query = ref({
  shareType: 1,
});
const search = ref({});
let loading = ref(false);
const page = ref({
  pageSize: 10,
  currentPage: 1,
  total: 0,
});
const selectionList = ref([]);
const data = ref([]);
let allocationDialogForm = ref({});
let isAllocation = ref(false);
let alloctionDialogTitle = ref('');
let phaseAddDialogWidth = ref(500);
const allocationDialogOption = ref({
  submitBtn:false,
  emptyBtn:false,
  span:24,
  column:[
    {
      label: '姓名',
      prop: 'name',
      type: 'input',
      overHidden: true,
      disabled: true,
    },
    {
      label: '单位',
      prop: 'DW',
      type: 'input',
      overHidden: true,
      disabled: true,
    },
    {
      label: '电话',
      prop: 'DH',
      type: 'input',
      overHidden: true,
      disabled: true,
    },
  ]
})
/* 
  type 0: 病例编号点击
  type 1: 所属主要研究者（录入员）点击
*/
const handleAllocationMenu = (type, row = {}, index = null) => {
  if (type === 0) {
    crud.value.rowEdit(row, index);
  }
  if (type === 1) {
    isAllocation.value = true;
    alloctionDialogTitle.value = '主要研究者(录入员）基本信息';
  }
};
const handleBack = () => {
  router.push({
    path: '/trial/menu',
    query: {
      selectTab: 3,
      trialId: routerQuery.value.trialId,
      groupId: routerQuery.value.groupId,
    },
  });
};
const rowUpdate = (row, index, done, loading) => {
  update(row).then(
    () => {
      // onLoad(page.value);
      TabRefreshChange();
      ElMessage({
        type: 'success',
        message: '操作成功!',
      });
      done();
    },
    error => {
      loading();
      console.log(error);
    }
  );
};
const searchReset = () => {
  query.value = {};
  onLoad(page.value, query.value);
};
const searchChange = (params, done) => {
  query.value = params;
  page.value.currentPage = 1;
  onLoad(page.value, params);
  done();
};
const beforeOpen = (done, type) => {
  if (['edit', 'view'].includes(type)) {
    getDetail(form.value.id).then(res => {
      form.value = res.data.data;
    });
  }
  done();
};
const selectionChange = list => {
  selectionList.value = list;
};
const selectionClear = () => {
  selectionList.value = [];
  crud.value.toggleSelection();
};
const currentChange = currentPage => {
  page.value.currentPage = currentPage;
};
const sizeChange = pageSize => {
  page.value.pageSize = pageSize;
};
const refreshChange = () => {
  onLoad(page.value, query.value);
};
const onLoad = (page, params = {}) => {
  loading.value = true;

  const { name, lbType } = query.value;

  let values = {
    name_: name,
    lbType_: lbType,
    descs: 'create_time',
    shareType: params.shareType || 1,
    ...params,
  };

  getList(page.currentPage, page.pageSize, values).then(res => {
    const DATA = res.data.data;
    page.total = DATA.total;
    data.value = DATA.records;
    data.value.forEach(item => {
      item.isShareSelect = 3;
      if (item.publicShare == '1') {
        item.isShareBtn = '0';
        item.isShareSelect = 1;
      } else if (item.deptShare == '1') {
        item.isShareBtn = '6';
        item.isShareSelect = 2;
      }
    });
    loading.value = false;
    selectionClear();
  });
};
</script>
<style scoped>
.allocation-content {
  width: 100%;
  height: 100%;
}
.allocation-header {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #e4e7ed;
  /* line-height: 30px; */
  color: black;
  font-weight: 550;
  display: flex;
  align-items: center;
  font-size: 24px;
  padding-bottom: 10px;
}
</style>